<template>
	<div class="container-fluid">
		<div class="row">
			<div class="col-lg-3"></div>
			<div class="col-lg-6 bg-white">
				
		
				<div class="modal-content">
					<div class="modal-header">
						
						<h4 style="color: red">
							<span class="glyphicon glyphicon-lock"></span> Register
						</h4>
					</div>
					<div class="modal-body">
						<form role="form">
							<!-- 用户名 -->
							<div class="form-group">
								<label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
								<input v-model="info.username" @change="removeSpace" type="text" class="form-control" id="usrname"
									placeholder="Enter name" />
								<div v-if="info.username != '' && (info.username.length < 3 || info.username.length > 10)"
									class="invalid-feedback">昵称必须在3~10位之间</div>
							</div>
							<!-- 学号 -->
							<!-- <div class="form-group">
								<label for="stuid"><span class="glyphicon glyphicon-user"></span> Student ID</label>
								<input v-model="info.stuid" type="number" class="form-control" id="stuid"
									placeholder="Enter stu id" />
								<div v-if="info.stuid != '' && info.stuid.length != 6">学号应为6位数字</div>
							</div> -->
							<!-- 密码 -->
							<div class="form-group">
								<label for="psw"><span class="glyphicon glyphicon-eye-open"></span>
									Password</label>
								<input v-model="info.pwd0" type="password" class="form-control" id="psw"
									placeholder="Enter password" />
								<div v-if="info.pwd0!=''&&(info.pwd0.length < 6 || info.pwd0.length > 10)">密码必须在6~10位之间</div>
							</div>
							<!-- 确认密码 -->
							<div class="form-group">
								<input v-model="info.password" type="password" class="form-control" id="psw2"
									placeholder="Enter password again" />
								<div v-if="info.password != '' && info.pwd0 != info.password" class="invalid-feedback">两次密码必须相同</div>
							</div>
							<!-- 确认注册 -->
							<button type="button" class="btn btn-default btn-success btn-block" @click="regist">
								<span class="glyphicon glyphicon-off"></span> 注册
							</button>
						</form>
					</div>
					<div class="modal-footer">
						<small>已有账号?</small><router-link to="/login">登录</router-link>
						<!-- <p>Forgot <a href="#">Password?</a></p> -->
					</div>
				
				</div>
			</div>
			<div class="col-lg-3"></div>
		</div>
	</div>
	
</template>

<script>
export default {
	name: "RegistPage",
	data() {
		return {
			verify: false,
			info: {
				pwd0: "",
				username: "",
				password: "",
			},
		};
	},
	methods: {
		to_login() {
			this.$router.push("/login");
		},


		removeSpace() {
			this.info.username = this.info.username.replace(/\s+/g, "")
		},
		check(){
			console.log(this.info)
			if(this.info.username == '' || this.info.username.length < 3 || this.info.username.length > 10){
				alert("昵称必须在3~10位之间")
				return false
			}
			// if(this.info.stuid == '' || this.info.stuid.length != 6){
			// 	alert("学号应为6位数字")
			// 	return false
			// }
			if(this.info.pwd0 == '' || this.info.pwd0.length < 6 || this.info.pwd0.length > 10){
				alert("密码必须在6~10位之间")
				return false
			}
			if(this.info.password == '' || this.info.pwd0 != this.info.password){
				alert("两次密码必须相同")
				return false
			}
			return true
		},
		

		regist() {

			var res = this.check()
			if(res == false){
				return
			}
				
			let formData = JSON.stringify(this.info);
			this.$axios
				.post("/register", formData)
				.then((response) => {
					if (response.data.code == "200") {
						alert(response.data.msg);
						this.$router.push("/login");
					} else {
						alert(response.data.msg);
					}
				})
				.catch((err) => {
					console.log(err);
				});
		},
	},
};
</script>

<style>
.input-no-space::-webkit-input-placeholder {
	white-space: nowrap;
}

.input-no-space:-ms-input-placeholder {
	white-space: nowrap;
}
</style>